import { View, Text } from '@tarojs/components';
import * as Taro from '@tarojs/taro';
import './index.less';

interface HeaderProps {
  title: string;
  showBackButton?: boolean;
  showNavigationButton?: boolean;
  rightActions?: React.ReactNode;
  onBack?: () => void;
  className?: string;
}

const Header: React.FC<HeaderProps> = ({
  title,
  showBackButton = true,
  showNavigationButton = false,
  rightActions,
  onBack,
  className = ''
}) => {
  const handleBack = () => {
    if (onBack) {
      onBack();
    } else {
      // 使用 Taro 导航 API 返回上一页
      Taro.navigateBack();
    }
  };

  const handleNavigation = () => {
    // TODO: 根据实际需要调整导航路径
    Taro.navigateTo({ url: '/pages/navigation/index' });
  };

  return (
    <View className={`header-container ${className}`}>
      <View className='header-content'>
        <View className='header-wrapper'>
          {/* 左侧区域 */}
          <View className='header-left'>
            {showBackButton && (
              <View
                className='back-button'
                onClick={handleBack}
              >
                <Text className='back-icon'>‹</Text>
              </View>
            )}
            <View className='title-wrapper'>
              <Text className='header-title'>{title}</Text>
            </View>
          </View>

          {/* 右侧区域 */}
          <View className='header-right'>
            {showNavigationButton && (
              <View
                className='nav-button'
                onClick={handleNavigation}
              >
                <Text className='nav-icon'>☰</Text>
                <Text className='nav-text'>页面导航</Text>
              </View>
            )}
            {rightActions && (
              <View className='right-actions'>
                {rightActions}
              </View>
            )}
          </View>
        </View>
      </View>
    </View>
  );
};

export default Header;
